<template>
  <div class="login-wrapper">
    <div class="login-from">
      <!-- <div class="login-register">
      </div> -->
      <div class="login-bg">
        <img class="login-img" src="/images/login-logo.png" alt="">
      </div>
      <p class="login-subtitle">中铝视拓容器云</p>
      <Form ref="formInline" :model="formInline" :rules="ruleInline" label-position="left">
        <FormItem prop="username">
          <div class="u-input flex">
            <div class="flex-person">
              <img src="/images/person.png" />
            </div>
            <div class="flex-1">
              <Input class="login-input" type="text" v-model="formInline.username" placeholder="输入用户名"></Input>
            </div>
          </div>
        </FormItem>
        <FormItem prop="password">
          <div class="u-input flex">
            <div class="flex-password">
              <img src="/images/password.png" />
            </div>
            <div class="flex-1">
              <Input class="login-input" type="password" v-model="formInline.password" placeholder="输入密码"> </Input>
            </div>
          </div>
        </FormItem>
        <FormItem>
          <Button class="login-btn" type="primary" :loading="isLoading" @click="submit('formInline')">登录</Button>
        </FormItem>
      </Form>
      <div>
        <div class="lgoin-company">版权所有 中铝视拓智能科技有限公司</div>
      </div>
    </div>
  </div>
</template>

<script>
import Fetch from '@/api/request'
// import { getData } from '../plugins/zlst-axios.js'

export default {
  name: 'LoginForm',
  data() {
    return {
      formInline: {
        username: '',
        password: ''
      },
      ruleInline: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            type: 'string',
            min: 4,
            message: '密码长度不能小于4位',
            trigger: 'blur'
          }
        ]
      },
      isLoading: false,
      keydownLabel: null
    }
  },
  mounted() {
    let vm = this
    vm.$nextTick(function () {
      // 添加enter监听
      document.body.addEventListener('keydown', vm.keydownHandle)
    })
  },
  methods: {
    keydownHandle() {
      if (event.key === 'Enter') {
        this.submit()
      }
    },
    // 提交登录
    submit(name) {
      this.$refs['formInline'].validate((valid) => {
        if (valid) {
          this.isLoading = true
          Fetch.post({
            url: '/api/login',
            params: this.formInline,
            done: () => {
              this.isLoading = false
            }
          }).then((res) => {
            // 存储token、permissions
            this.$store.commit('SET_TOKEN', res.data)
            this.$store.commit('SET_PERMISSIONS', res.permissions)
            this.$cookie.set('token', res.data.token, { expires: (res.data.liveTime / 1000) + 's' })
            this.getEnvs()
          })
        }
      })
    },
    // 获取环境列表
    getEnvs() {
      Fetch.get({
        url: '/api/environment'
      }).then((res) => {
        document.body.removeEventListener('keydown', this.keydownHandle)
        this.$store.commit('SET_ENVIRONMENTS', res.data)
        localStorage.setItem('wsUrl', res.wsUrl)
        for (let i = 0; i < res.data.length; i++) {
          const env = res.data[i]
          if (i === 0) {
            localStorage.setItem('envionmentSelect', JSON.stringify({environmentId: env.environmentId, environmentName: env.environmentName ? env.environmentName : env.environmentId}))
            this.$router.push('/home/environment/' + env.environmentId + '/info')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.login-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #f7fbfe;
  background: url("/assets/img/login_bg.png") no-repeat;
  background-size: 100% 100%;
  .login-from {
    position: absolute;
    width: 360px;
    height: 424px;
    top: 50%;
    left: 50%;
    margin-left: -172px;
    margin-top: -264px;
    background-color: #2e68a6;
    padding: 30px 16px;
    .login-bg {
      width: 80px;
      height: 80px;
      background-color: #fff;
      border-radius: 100px;
      margin-left: 128px;
      .login-img {
        width: 80px;
      }
    }
    .login-subtitle {
      font-size: 30px;
      color: #ffffff;
      padding: 16px 0 12px 0;
      text-align: center;
    }
    .login-input {
      height: 32px;
      .ivu-input {
        height: 32px;
        box-shadow:0 0 0 60px #2e68a6 inset;
        -webkit-text-fill-color: #fff;
        border-color: #2e68a6;
        font-size: 16px;
      }
    }
    .login-btn {
      width: 100%;
      background-color: #ffffff;
      color: #2e68a6;
      font-size: 24px;
      height: 48px;
      margin-top: 20px;
    }
    .login-register {
      float: right;
      margin-top: -16px;
      margin-right: -16px;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-color: transparent #003b62;
      border-width: 0 72px 72px 0;
      border-style: solid;
      color: #fff;
    }
    .lgoin-company {
      width: 100%;
      height: 32px;
      line-height: 32px;
      text-align: center;
      position: fixed;
      left: 0;
      bottom: 0;
      font-size: 20px;
      color: #adafb0;
    }
  }
}
.u-input {
  border-bottom: 1px solid #fff;
  padding-bottom: 8px;
  .flex-person {
    margin-top: 8px;
    width: 30px;
    text-align: center;
    img {
      width: 25px;
    }
  }
  .flex-password {
    margin-top: 8px;
    width: 30px;
    text-align: center;
    img {
      width: 18px;
    }
  }
}
input:-internal-autofill-previewed, input:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected {
    background-color: #2e68a6 !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 16px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
box-shadow:0 0 0 60px #2e68a6 inset;
-webkit-text-fill-color: #fff;
border-color: #2e68a6;
}
.u-input /deep/ input {
  caret-color: #fff;
}
</style>
